<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>简易随机点名</title>
    <style>
        #box {
            width: 1000px;
            height: 500px;
            text-align: center;
            border: 1px solid #fff;
            margin: 0 auto;
            background: #cccbcb;
            font-size: 60px;
            color: white;
        }

        button {
            width: 200px;
            height: 100px;
        }
    </style>
</head>

<body>
    <div id="box">
        <p>随机抽查点名</p>
        <button>开始</button>
        <button>结束</button>
    </div>
    <script>
        // 获取开始
        var oStart = document.getElementsByTagName('button')[0];
        // 获取结束
        var oStop = document.getElementsByTagName('button')[1];
        // 获取p标签
        var oP = document.getElementsByTagName('p')[0];
        // 定义一个数组
        var arr = ['欧阳菁', '李达康', '韩美珍', '郑伯鸿', '孙大妞', '王满堂', '吴刚', '蔡英豪', '邱莹', '李维民', '段凯文', '何建国', '李佳佳'];
        //定义定时器
        var timer;
        // 开始点击事件
        oStart.onclick = function () {
            // 关闭定时器
            clearInterval(timer);
            // 声明定时器
            timer = setInterval(f, 200);
            // 定时器函数
            function f() {
                // 随机
                var str = parseInt(Math.random() * arr.length);
                // p的值
                oP.innerHTML = arr[str];
            }
        }
        // 结束点击事件
        oStop.onclick = function () {
            // 关闭定时器
            clearInterval(timer);
        }
    </script>
</body>

</html>